<template>
  <div class="opt">
    <div class="path"><span class="level-1">任务管理</span> > <span class="level-2">任务列表</span> > <span class="level-2">任务详情</span></div>
    <div>
      <div class="title"><span>基本信息</span></div>
      <p style="font-weight: bold;margin-top: 10px;">
        <span style="display: inline-block;width: 130px;text-align: right;padding-right: 5px">任务ID：</span>
        <span>{{row.id}}</span>
      </p>
        <Form :label-width="120" class="con info">
          <FormItem label="任务名称："><span :title="info.goods_title">{{info.goods_title | lengthCtrl(80)}}</span></FormItem>
          <FormItem label="发布时间：">{{info.start_time}}</FormItem>
          <FormItem label="结束时间：">{{info.end_time}}</FormItem>
          <FormItem label="创建时间：">{{info.create_time}}</FormItem>
          <FormItem label="商家ID：">{{info.bid}}</FormItem>
          <FormItem label="店铺名称：">{{info.store}}</FormItem>
        </Form>
    </div>
    <div>
      <div class="title"><span>流程进度</span></div>
      <div class="con service">
        <Steps :current="0">
          <Step title="创建任务" content="2019-12-13 14:40:04"></Step>
          <Step title="任务审核通过" content="未完成"></Step>
          <Step title="发布任务" content="未完成"></Step>
          <Step title="任务结束" content="未完成"></Step>
        </Steps>
      </div>
    </div>
    <div>
      <div class="title"><span>任务信息</span></div>
      <Form :label-width="120" class="con task-info">
        <FormItem label="下单方式：">{{info.taskType}}</FormItem>
        <FormItem label="商品长链："><span :title="info.goods_url" style="color: #2d8cf0;cursor: pointer" @click="gotoGoods(info.goods_url)">{{info.goods_url | lengthCtrl(80)}}</span></FormItem>
        <FormItem label="商品标题："><span :title="info.goods_title">{{info.goods_title | lengthCtrl(80)}}</span></FormItem>
        <FormItem label="商品主图：">
          <img :src="info.goods_pic" width="200px" height="200px"/>
        </FormItem>
      </Form>
      <Form :label-width="120" class="con task-keyword" v-for=" key in info.keywordList">
        <FormItem label="关键词：">{{key.keyword}}</FormItem>
        <FormItem label="单量：">{{key.num}}</FormItem>
      </Form>
      <Form :label-width="120" class="con task-info">
        <FormItem label="店铺：">{{info.store}}</FormItem>
        <FormItem label="每单拍：">{{info.goods_num}}</FormItem>
        <FormItem label="单量：">{{info.task_num}}</FormItem>
        <FormItem label="额外要求：">{{info.remark}}</FormItem>
      </Form>
      <DataList :columns="columns"
                :data="list"
                :needPager="false"
                :setHeight="280"
      ></DataList>
    </div>

  </div>
</template>
<script>
import {taskDetail} from '@/api/api-list'
import DataList from './DataList'
export default {
  name: 'OrderDetailModal',
  data () {
    return {
      columns: [
        {
          title: '项目',
          key: 'name',
          align: 'center'
        },
        {
          title: '单笔（元）',
          key: 'preAmount',
          width: 200,
          align: 'center'
        },
        {
          title: '数量',
          key: 'count',
          width: 200,
          align: 'center'
        },
        {
          title: '合计（元）',
          key: 'totalAmount',
          width: 200,
          align: 'center'
        }
      ],
      info: {},
      list: []
    }
  },
  props: {row: Object},
  components: {DataList},
  methods: {
    getDetail () {
      taskDetail({id: this.row.id}).then(res => {
        if (res.status !== '0000') return
        this.info = res.data
        this.list = res.data.list
      })
    },
    gotoGoods (goods_url) {
      window.open(goods_url, '_blank')
    }
  },
  watch: {
    row () {
      if (this.row.id) {
        this.getDetail()
      }
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/iview.css";
  .opt{
    overflow: auto;
    >div{
      background: #fff;
      margin-bottom: 10px;
      padding: 5px 10px 10px;
      font-size: 18px!important;
      border-radius: 4px;
    }
    .title{
      padding: 10px 0;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
      span{
        padding: 0 10px;
        border-left: 4px solid #5293fe;
      }
    }
    .path{
      font-size: 15px;
      padding: 10px;
      .level-1{
        border-left: 4px solid #5293fe;
        padding: 2px 10px;
        font-weight: bold;
        font-size: 18px;
      }
      .level-2{
        font-size: 18px;
        padding-left: 10px;
      }
    }
    .con.link{
      display: flex;
      align-items: center;
      padding:20px 15px;
    }
    .con.service{
      display: flex;
      padding:20px 15px;
    }
    .con.info{
      display: flex;
      flex-wrap: wrap;
      padding:20px 15px 0 15px;
      .ivu-form-item{
        min-width: 30%;
        margin: 0;
      }
    }
    .con.task-info{
      display: flex;
      flex-wrap: wrap;
      padding:20px 15px 0 15px;
      .ivu-form-item{
        min-width: 100%;
        margin: 0;
      }
    }
    .con.task-keyword{
      display: flex;
      flex-wrap: wrap;
      padding:20px 15px 0 15px;
      .ivu-form-item{
        min-width: 50%;
        margin: 0;
      }
    }
  }

</style>
